<template>
    <div class="section-header">
        <div class="section-title">
            <span class="title-text">
                <component :is="getTypeIcon(type)" class="title-icon" />
                {{ title }}
            </span>
        </div>
        <div class="section-actions">
            <div class="action-group">
                <a-checkbox class="select-all" :indeterminate="indeterminate" :checked="checkAll"
                    @change="(e: Event) => $emit('checkAllChange', (e.target as HTMLInputElement).checked)">
                    <span class="select-all-content">
                        <CheckOutlined class="select-all-icon" />
                        全选
                    </span>
                </a-checkbox>
            </div>

            <div class="action-group">
                <a-tooltip title="显示开关">
                    <a-button class="toggle-btn" size="small" :type="allDisplayEnabled ? 'primary' : 'default'"
                        @click="$emit('toggleAllDisplay', !allDisplayEnabled)">
                        <template #icon>
                            <EyeOutlined v-if="allDisplayEnabled" />
                            <EyeInvisibleOutlined v-else />
                        </template>
                        {{ allDisplayEnabled ? "隐藏" : "显示" }}
                    </a-button>
                </a-tooltip>

                <a-tooltip title="音效开关">
                    <a-button class="toggle-btn" size="small" :type="allSoundsEnabled ? 'primary' : 'default'"
                        @click="$emit('toggleAllSounds', !allSoundsEnabled)">
                        <template #icon>
                            <SoundOutlined v-if="allSoundsEnabled" />
                            <StopOutlined v-else />
                        </template>
                        {{ allSoundsEnabled ? "关闭音效" : "开启音效" }}
                    </a-button>
                </a-tooltip>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {
    CheckOutlined,
    SoundOutlined,
    StopOutlined,
    EyeOutlined,
    EyeInvisibleOutlined
} from "@ant-design/icons-vue";
import { getTypeIcon } from '../utils/iconMapping';
import type { FilterType } from '../types';
import '../styles/FilterHeader.css';

defineProps<{
    type: FilterType;
    title: string;
    checkAll: boolean;
    indeterminate: boolean;
    allSoundsEnabled: boolean;
    allDisplayEnabled: boolean;
}>();

defineEmits<{
    (e: 'checkAllChange', checked: boolean): void;
    (e: 'toggleAllSounds', enabled: boolean): void;
    (e: 'toggleAllDisplay', enabled: boolean): void;
}>();
</script>

<style scoped>
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
}

.section-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.action-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toggle-btn {
    min-width: 80px;
}

.select-all-content {
    display: flex;
    align-items: center;
    gap: 4px;
}

.title-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.title-icon {
    font-size: 16px;
}
</style>